<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no,email=no" />
		<title>儒牛卡充值</title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/style.css" rel="stylesheet" />
		<style>
			#user-pay{
				background-color:#dd2b2e;
			}
			.banner{
				margin:30px 40px;
			}
			.banner img{
				width: 100%;
			}
			.pay-form{
				margin: 0 35px;
			}
			#card-form{
				border-radius:4px ;
				overflow: hidden;
			}
			.area {
				margin: 20px auto 0px auto;
			}
			
			.mui-input-group label {
				width: 25%;
				line-height:40px;
				padding:0;
				text-align: center;
			}
			.mui-input-group .mui-input-row:after{
				background: transparent;
			}
			.mui-input-row{
				border-bottom: 1px #dedede solid;
			}
			.mui-input-row label~input{
				width: 75%;
				font-size: 14px;
			}
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}
			.mui-content-padded {
				
				margin: 25px 35px;
			}
			.mui-btn {
				color: #38351C;
				padding: 10px;
				background-color: #f3e21a;
				word-spacing:25px;
			}
			.mui-btn-danger:enabled:active{
				color: #38351C;
				background-color: #fff705;
			}
			
			
		</style>

	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">儒牛卡充值</h1>
		</header>
		<div id="user-pay" class="mui-content">
			<div class="banner">
				<img src="../images/Pay.png"  />
			</div>
			<div class="pay-form">
				<form id='card-form' class="mui-input-group">
					<div class="mui-input-row">
						<label>卡号：</label>
						<input id='account' type="text" class="mui-input-clear mui-input" placeholder="请输入充值卡号" maxlength="12">
					</div>
					<div class="mui-input-row mui-password">
						<label>密码：</label>
						<input id='password' type="password" class="mui-input-password mui-input" placeholder="请输入密码">
					</div>
				</form>
			</div>
			
			
			<div class="mui-content-padded">
				<button id='cardinfo' class="mui-btn mui-btn-block mui-btn-danger">充         值</button>
			</div>
			
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/mui.enterfocus.js"></script>
		<script src="../js/app.js"></script>
		<script>
		(function($, doc) {
		   $.init({
					swipeBack:true,
					beforeback:function(){
					mui.fire(plus.webview.getWebviewById('user/usercenter.html'),'updateData');
					}
				});	
	       	$.plusReady(function() {
	       		var toMain = function() {
						$.fire(plus.webview.getWebviewById('user/usercenter.html'),'updateData');
						plus.webview.currentWebview().close();
					};
				//检查 "登录状态/锁屏状态" 结束
				var cardButton = doc.getElementById('cardinfo');
				var accountBox = doc.getElementById('account');
				var passwordBox = doc.getElementById('password');
				//var forgetButton = doc.getElementById('forgetPassword');
				cardButton.addEventListener('tap', function(event) {
					var cardInfo = {
						account: accountBox.value,
						password: passwordBox.value
					};
					app.rechargeVerify(cardInfo, function(err) {
						if (err) {
							plus.nativeUI.toast(err);
							return;
						}
					    toMain();
					});
				});
				$.enterfocus('#card-form input', function() {
					$.trigger(cardButton, 'tap');
				});
	       	});
		}(mui, document));
		</script>
	</body>

</html>
